<template>
	<view class="coupon-center-wrapper">
		<view class="coupons">
			<view class="banner">
				<view class="bg">
					<image src="/static/images/icon/coupon-bg.png"></image>
				</view>
				<view class="img">
					<image src="/static/images/icon/coupon-banner.png"></image>
				</view>
			</view>
			<view class="con-box">
				<view class="c-tit" v-if="couponList.length">{{i18n.universalCoupon}}</view>
				<scroll-view scroll-x="true" class="general-box" v-if="couponList.length">
					<view class="general">
						<view class="item" v-for="(item, index) in couponList" :key="item.couponId">
							<view
								:class="'item-box ' + ((item.canGoUse) ? 'received' : (!item.stocks ? 'robbed' : '') )">
								<view class="item-con">
									<view class="number" v-if="item.couponType == 1">
										<view class="symbol">￥</view>
										<view class="text">{{item.reduceAmount}}</view>
									</view>
									<view class="number" v-if="item.couponType == 2">
										<view class="text">{{item.couponDiscount}}</view>
										<view class="symbol">{{i18n.discount}}</view>
									</view>
									<view class="condition">
										{{i18n.available}}{{item.cashCondition}}{{i18n.availableUse}}
									</view>
									<view class="scope" v-if="item.suitableProdType == 0">{{i18n.universalAll}}</view>
									<view class="scope" v-if="item.suitableProdType != 0">{{i18n.universalOnly}}</view>
									<view class="progress-box">
										<view class="text" v-if="item.stocks == 0">{{i18n.nocoupons}}</view>
										<view class="text" v-if="item.stocks != 0">
											{{i18n.haveCoupons}}{{wxs.rounding((item.sourceStock - item.stocks) * 100 / item.sourceStock)}}%
										</view>
										<view class="progress"
											:style="'width: ' + (wxs.rounding((item.sourceStock - item.stocks) * 100 / item.sourceStock)) + '%'">
										</view>
									</view>
								</view>
								<view class="item-btn" v-if="!item.canGoUse && item.stocks"
									:data-couponid="item.couponId" data-coupontype="1" :data-couponindex="index"
									@tap="receiveCoupon">{{i18n.getIt}}</view>
								<view class="item-btn" v-if="item.canGoUse" :data-couponid="item.couponId"
									@tap="useCoupon">{{i18n.toUse}}</view>
								<view class="item-btn" v-if="!item.canGoUse && !item.stocks">{{i18n.nocoupons1}}</view>
								<view class="icon" v-if="item.canGoUse">
									<image
										:src="isEn ? '/static/images/icon/coupon-received-en.png':'/static/images/icon/coupon-received.png'">
									</image>
								</view>
								<view class="icon" v-if="!item.canGoUse && !item.stocks">
									<image
										:src="isEn ? '/static/images/icon/coupon-robbed-en.png':'/static/images/icon/coupon-robbed.png'">
									</image>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="c-tit" v-if="prodCouponList.length">{{i18n.recommendCoupons}}</view>
				<view class="special" v-if="prodCouponList.length">
					<view class="item" v-for="(item, index) in prodCouponList" :key="item.couponId">
						<view :class="'item-box ' + ((item.canGoUse) ? 'received' : (!item.stocks ? 'robbed' : ''))">
							<!-- 多商品券 -->
							<view class="item-con" v-if="item.prods.length > 1">
								<view class="shop-msg">
									<view class="logo">
										<image :src="item.shopLogo"></image>
									</view>
									<view class="name">{{item.shopName}}</view>
								</view>
								<view class="prod-msg">
									<view class="p-item" v-for="(prod, prodIndex) in item.prods" :key="prodIndex">
										<view class="img">
											<image :src="prod.pic"></image>
										</view>
										<view class="price">￥{{prod.price}}</view>
									</view>
								</view>
							</view>
							<view class="item-btn" v-if="item.prods.length > 1">
								<view class="btn-box">
									<view class="number" v-if="item.couponType == 1">
										<view class="symbol">￥</view>
										<view class="text">{{item.reduceAmount}}</view>
									</view>
									<view class="number" v-if="item.couponType == 2">
										<view class="text">{{item.couponDiscount}}</view>
										<view class="symbol">{{i18n.discount}}</view>
									</view>
									<view class="condition">
										{{i18n.available}}{{item.cashCondition}}{{i18n.availableUse}}
									</view>
									<view class="progress-box">
										<view class="text" v-if="item.stocks == 0">{{i18n.nocoupons}}</view>
										<view class="text" v-if="item.stocks != 0">
											{{i18n.haveCoupons}}{{wxs.rounding((item.sourceStock - item.stocks) * 100 / item.sourceStock)}}%
										</view>
										<view class="progress"
											:style="'width: ' + (wxs.rounding((item.sourceStock - item.stocks) * 100 / item.sourceStock)) + '%'">
										</view>
									</view>
									<view class="btn" v-if="!item.canGoUse && item.stocks"
										:data-couponid="item.couponId" data-coupontype="2" :data-couponindex="index"
										@tap="receiveCoupon">{{i18n.getIt}}</view>
									<view class="btn" v-if="item.canGoUse" :data-couponid="item.couponId"
										:data-prodlist="item.prods" @tap="useCoupon">{{i18n.toUse}}</view>
									<view class="btn" v-if="!item.canGoUse && !item.stocks">{{i18n.nocoupons}}</view>
								</view>
							</view>
							<!-- /多商品券 -->
							<!-- 单商品券 -->
							<view class="left" v-if="item.prods.length == 1">
								<view class="img">
									<image :src="item.prods[0].pic"></image>
								</view>
								<view class="text-box">
									<view class="goods-name">{{item.prods[0].prodName}}</view>
									<view class="coupon-number">
										<view class="number" v-if="item.couponType == 1">
											<view class="symbol">￥</view>
											<view class="text">{{item.reduceAmount}}</view>
										</view>
										<view class="number" v-if="item.couponType == 2">
											<view class="text">{{item.couponDiscount}}</view>
											<view class="symbol">{{i18n.discount}}</view>
										</view>
									</view>
									<view class="condition">
										{{i18n.available}}{{item.cashCondition}}{{i18n.availableUse}}
									</view>
								</view>
							</view>
							<view class="right" v-if="item.prods.length == 1">
								<view class="btn-box">
									<view class="progress-text" v-if="item.stocks == 0">{{i18n.nocoupons}}</view>
									<view class="progress-text" v-if="item.stocks != 0">
										{{i18n.haveCoupons}}{{wxs.rounding((item.sourceStock - item.stocks) * 100 / item.sourceStock)}}%
									</view>
									<view class="progress-box">
										<view class="progress"
											:style="'width: ' + (wxs.rounding((item.sourceStock - item.stocks) * 100 / item.sourceStock)) + '%'">
										</view>
									</view>
									<view class="btn" v-if="!item.canGoUse && item.stocks"
										:data-couponid="item.couponId" data-coupontype="2" :data-couponindex="index"
										@tap="receiveCoupon">{{i18n.getIt}}</view>
									<view class="btn" v-if="item.canGoUse" :data-couponid="item.couponId"
										:data-prodlist="item.prods" @tap="useCoupon">{{i18n.toUse}}</view>
									<view class="btn" v-if="!item.canGoUse && !item.stocks">{{i18n.nocoupons}}</view>
								</view>
							</view>
							<!-- /单商品券 -->
							<!-- 已领取 -->
							<view class="icon" v-if="item.canGoUse || item.userHasCount !== 0">
								<image
									:src="isEn ? '/static/images/icon/coupon-received-en.png':'/static/images/icon/coupon-received.png'">
								</image>
							</view>
							<view v-else>
								<view class="icon" v-if="!item.canGoUse && !item.stocks">
									<image
										:src="isEn ? '/static/images/icon/coupon-robbed-en.png':'/static/images/icon/coupon-robbed.png'">
									</image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="loadall" v-if="prodCouponList.length > 10 && loadAll">{{i18n.endTips}}</view>

			<!-- 空 -->
			<view class="empty" v-if="couponList.length==0 && prodCouponList.length==0">
				<view class="empty-icon">
					<image src="/static/images/icon/empty.png"></image>
				</view>
				<view class="empty-text">{{i18n.merchantCoupon}}</view>
			</view>
		</view>
	</view>
</template>

<script module="wxs" lang="wxs" src="../../../wxs/number.wxs"></script>

<script>
	var http = require("../../../utils/http.js");
	var config = require("../../../utils/config.js");
	var util = require("../../../utils/util.js");

	export default {
		data() {
			return {
				couponList: [],
				// 通用券列表
				prodCouponList: [],
				// 商品券列表
				selectedCouponId: 0,
				// 要领取的优惠券id
				current: 1,
				isLogin: wx.getStorageSync('loginResult').userId ? true : false,
				size: 20,
				// 当前页数
				pages: 1, // 总页数
				loadAll: false, // 已加载全部
				isEn: uni.getStorageSync('lang') == 'en' ? true : false, // 是否为英文
			};
		},

		computed: {
			i18n() {
				return this.$t('index')
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) { //获取通用列表
		},

		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			//头部导航标题
			uni.setNavigationBarTitle({
				title: this.i18n.couponCenter
			});

			this.getCouponList();
			this.getProdCouponList(1);
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
			if (this.current < this.pages) {
				this.getProdCouponList(this.current + 1);
			} else {
				this.setData({
					loadAll: true
				})
			}
		},
		methods: {
			/**
			 * 获取通用列表
			 */
			getCouponList() {
				let url;
				url = this.isLogin ? '/p/myCoupon/generalCouponList' : '/coupon/generalCouponList'
				var params = {
					url: url,
					method: "GET",
					callBack: res => {
						this.initCouponCanGoUseFlag(res);
						this.setData({
							couponList: res
						});
						console.log(this.couponList)
					}
				};
				http.request(params);
			},

			/**
			 * 获取指定商品券
			 */
			getProdCouponList(cur) {
				let url;
				url = this.isLogin ? '/p/myCoupon/getCouponPage' : '/coupon/getCouponPage'
				var params = {
					url: url,
					method: "GET",
					data: {
						current: cur,
						size: this.size
					},
					callBack: res => {
						console.log(res)
						this.initCouponCanGoUseFlag(res.records);
						let list = [];

						console.log(res, '222222');
						if (res.current == 1) {
							list = res.records;
						} else {
							list = this.prodCouponList;
							list = list.concat(res.records);
						}

						this.setData({
							prodCouponList: list,
							pages: res.pages,
							current: res.current
						});
					}
				};
				http.request(params);
			},

			/**
			 * 初始化优惠券去可以使用的标记
			 */
			initCouponCanGoUseFlag(couponList) {
				couponList.forEach(coupon => {
					coupon.canGoUse = coupon.curUserReceiveCount >= coupon.limitNum;
					// coupon.canGoUse = coupon.curUserReceiveCount >= coupon.limitNum && coupon.userHasCount > 0;
				});
			},

			/**
			 * 设置优惠券去可以使用的标记
			 */
			setCouponCanGoUseFlag(index, couponType) {
				if (couponType == 1) {
					var tempCouponList = this.couponList;
					tempCouponList[index].canGoUse = true;
					tempCouponList[index].stocks -= 1;
					this.setData({
						couponList: tempCouponList
					});
				} else if (couponType == 2) {
					var tempCouponList = this.prodCouponList;
					tempCouponList[index].canGoUse = true;
					tempCouponList[index].stocks -= 1;
					this.setData({
						prodCouponList: tempCouponList
					});
				}
			},

			/**
			 * 立即领取
			 */
			receiveCoupon(e) {
				this.setData({
					selectedCouponId: e.currentTarget.dataset.couponid
				});
				util.checkAuthInfo(() => {
					var ths = this;

					if (ths.selectedCouponId) {
						uni.showLoading();
						http.request({
							url: "/p/myCoupon/receive",
							method: "POST",
							data: ths.selectedCouponId,
							callBack: data => {
								uni.hideLoading()
								uni.showToast({
									title: ths.i18n.successfullyReceived,
									icon: 'success',
									duration: 2000
								});
								this.setCouponCanGoUseFlag(e.currentTarget.dataset.couponindex, e
									.currentTarget.dataset.coupontype);
							}
						});
					}
				});
			},

			/**
			 * 立即使用
			 */
			useCoupon(e) {
				let url = '/packageUser/pages/prod-classify/prod-classify?sts=4';
				let couponId = e.currentTarget.dataset.couponid;
				var title = this.i18n.couponEventGoods;
				var prodList = e.currentTarget.dataset.prodlist;

				if (prodList && prodList.length == 1) {
					this.$Router.push({
						path: '/packageProduct/pages/prod/prod',
						query: {
							prodid: prodList[0].prodId
						}
					})
				} else {
					if (couponId) {
						url += "&tagid=" + couponId + "&title=" + title;
					}

					uni.navigateTo({
						url: url
					});
				}
			}

		}
	};
</script>
<style lang="scss">
	page {
		background: #f4f4f4;
	}

	.coupon-center-wrapper {

		.coupons {
			image {
				width: 100%;
				height: 100%;
			}

			.banner {
				position: relative;
				width: 750rpx;
				height: 284rpx;
				padding-top: 24rpx;

				.bg {
					position: absolute;
					top: 0;
					left: 0;
					font-size: 0;
					width: 750rpx;
					height: 220rpx;
				}

				.img {
					font-size: 0;
					width: 710rpx;
					height: 280rpx;
					margin: 0 auto;
					position: relative;
				}
			}

			.con-box {
				padding: 0 20rpx;

				.c-tit {
					padding: 20rpx;
					font-size: 28rpx;
					font-weight: 600;
					position: relative;
					margin-top: 10rpx;

					&::before {
						position: absolute;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
						display: block;
						width: 0;
						height: 0;
						content: " ";
						font-size: 0;
						border: 10rpx solid transparent;
						border-left: 12rpx solid #f2171a;
						border-radius: 6rpx;
					}
				}

				/* 通用券 */
				.general-box {
					background: #fff;
					padding: 20rpx;
					width: 710rpx;
					height: 206rpx;
					box-sizing: border-box;
					border-radius: 10rpx;

					.general {
						display: flex;
						align-items: center;

						.item {
							margin-right: 20rpx;

							&:last-child {
								margin-right: 0;
							}

							.item-box {
								border-radius: 10rpx;
								display: flex;
								align-items: center;
								position: relative;
								width: 288rpx;
								height: 166rpx;
								overflow: hidden;
								background: #fef1ef;

								&::before,
								&::after {
									position: absolute;
									z-index: 1;
									right: 60rpx;
									display: block;
									width: 20rpx;
									height: 20rpx;
									content: " ";
									font-size: 0;
									background: #fff;
									border-radius: 50%;
								}

								&::before {
									top: -10rpx;
								}

								&::after {
									bottom: -10rpx;
								}

								.item-con {
									flex: 1;
									text-align: center;
									padding: 0 30rpx;
									position: relative;
									z-index: 2;

									.number {
										display: flex;
										align-items: baseline;
										justify-content: center;
										color: #f2171a;
										font-family: arial;
										font-weight: 600;
										line-height: 1;
										position: relative;

										.symbol {
											font-size: 16rpx;
										}

										.text {
											font-size: 44rpx;
										}
									}

									.condition,
									.scope {
										display: -webkit-box;
										-webkit-box-orient: vertical;
										-webkit-line-clamp: 1;
										overflow: hidden;
										text-overflow: ellipsis;
									}

									.condition {
										font-size: 24rpx;
										line-height: 28rpx;
										margin: 6rpx 0;
									}

									.scope {
										font-size: 20rpx;
										line-height: 24rpx;
										color: #999;
									}

									.progress-box {
										width: 100%;
										height: 22rpx;
										background: #ffb5af;
										border-radius: 30rpx;
										position: relative;
										margin-top: 6rpx;
										overflow: hidden;

										.text {
											position: absolute;
											left: 0;
											top: 0;
											width: 100%;
											height: 22rpx;
											line-height: 22rpx;
											font-size: 20rpx;
											color: #fff;
											text-align: center;
										}

										.progress {
											height: 22rpx;
											border-radius: 30rpx;
											background: #f53e17;
										}
									}
								}

								.item-btn {
									position: relative;
									font-size: 24rpx;
									color: #fff;
									width: 50rpx;
									padding: 0 10rpx;
									height: 100%;
									display: flex;
									align-items: center;
									text-align: center;
									flex-wrap: nowrap;
									line-height: 30rpx;
									background: -webkit-linear-gradient(left, #f53e17, #f2171a);
									background: linear-gradient(to right, #f53e17, #f2171a);
									writing-mode: vertical-rl;
									justify-content: center;

									&::before {
										position: absolute;
										left: 0;
										top: 28rpx;
										bottom: 28rpx;
										display: none;
										width: 2rpx;
										height: auto;
										content: " ";
										font-size: 0;
										border-left: 2rpx dashed #f2171a;
										opacity: 0.1;
									}
								}

								.icon {
									position: absolute;
									top: -24rpx;
									right: 60rpx;
									display: none;
									width: 80rpx;
									height: 80rpx;
								}

								&.received .icon,
								&.robbed .icon {
									display: block;
								}

								&.received .item-btn {
									color: #f2171a;
									line-height: 32rpx;
									background: none;
								}

								&.received .item-btn::before {
									display: block;
								}

								&.robbed {
									background: #f3f3f3;
								}

								&.robbed .item-con .number,
								&.robbed .item-con .condition {
									color: #999;
								}

								&.robbed .item-con .progress-box,
								&.robbed .item-con .progress-box .progress {
									background: #ccc;
								}

								&.robbed .item-btn {
									color: #999;
									line-height: 32rpx;
									background: none;
								}

								&.robbed .item-btn::before {
									display: block;
									border-left: 2rpx dashed #333;
								}
							}
						}

					}
				}

				/* 通用券 end */

				/* 店铺券 */
				.special {
					.item {
						margin-bottom: 20rpx;

						.item-box {
							background: #fff;
							position: relative;
							border-radius: 10rpx;
							display: flex;
							overflow: hidden;
						}

						.item-box::before,
						.item-box::after {
							position: absolute;
							right: 198rpx;
							display: block;
							width: 24rpx;
							height: 24rpx;
							content: " ";
							font-size: 0;
							background: #f4f4f4;
							border-radius: 50%;
							z-index: 1;
						}

						.item-box::before {
							top: -12rpx;
						}

						.item-box::after {
							bottom: -12rpx;
						}

						.item-box .item-con {
							flex: 1;
							padding: 20rpx;
						}

						.item-box .item-con .shop-msg {
							display: flex;
							align-items: center;
						}

						.item-con .shop-msg .logo {
							width: 40rpx;
							height: 40rpx;
							font-size: 0;
							border-radius: 50%;
							overflow: hidden;
						}

						.item-box .item-con .shop-msg .logo image {
							border-radius: 50%;
						}

						.item-box .item-con .shop-msg .name {
							flex: 1;
							margin-left: 10rpx;
							font-size: 24rpx;
							font-weight: 600;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.item-box .item-con .prod-msg {
							margin-top: 20rpx;
							display: flex;
						}

						.item-box .item-con .prod-msg .p-item {
							margin-left: 20rpx;
						}

						.item-box .item-con .prod-msg .p-item:first-child {
							margin-left: 0;
						}

						.item-box .item-con .prod-msg .img {
							width: 140rpx;
							height: 140rpx;
							border-radius: 10rpx;
							overflow: hidden;
							font-size: 0;
						}

						.item-box .item-con .prod-msg .img image {
							border-radius: 10rpx;
						}

						.item-box .item-con .prod-msg .price {
							color: #333;
							font-size: 22rpx;
							display: block;
							text-align: center;
						}

						.item-box .item-btn {
							text-align: center;
							display: flex;
							align-items: center;
							justify-content: center;
							position: relative;
							padding: 20rpx;
							width: 170rpx;
							background: -webkit-linear-gradient(left, #fef1ef, #fffaf9);
							background: linear-gradient(to right, #fef1ef, #fffaf9);
						}

						.item-box .item-btn .btn-box {
							position: relative;
							z-index: 1;
							flex: 1;
						}

						.item-box .item-btn .btn-box .number {
							display: flex;
							align-items: baseline;
							justify-content: center;
							color: #f2171a;
							font-family: arial;
							font-weight: 600;
							line-height: 1;
							position: relative;
							z-index: 2;
						}

						.item-box .item-btn .btn-box .number .symbol {
							font-size: 28rpx;
						}

						.item-box .item-btn .btn-box .number .text {
							font-size: 44rpx;
						}

						.item-box .item-btn .btn-box .condition {
							font-size: 24rpx;
							line-height: 28rpx;
							margin: 10rpx 0;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.item-box .item-btn .btn-box .progress-box {
							height: 22rpx;
							background: #ffb5af;
							border-radius: 30rpx;
							position: relative;
							margin: 0 6rpx;
							overflow: hidden;
						}

						.item-box .item-btn .btn-box .progress-box .text {
							position: absolute;
							left: 0;
							top: 0;
							width: 100%;
							height: 22rpx;
							line-height: 22rpx;
							font-size: 20rpx;
							color: #fff;
							text-align: center;
						}

						.item-box .item-btn .btn-box .progress-box .progress {
							height: 22rpx;
							border-radius: 30rpx;
							background: #f53e17;
						}

						.item-box .item-btn .btn-box .btn {
							font-size: 24rpx;
							color: #fff;
							margin-top: 24rpx;
							height: 50rpx;
							line-height: 50rpx;
							box-sizing: border-box;
							text-align: center;
							border-radius: 50rpx;
							background: -webkit-linear-gradient(left, #f53e17, #f2171a);
							background: linear-gradient(to right, #f53e17, #f2171a);
						}

						.item-box .item-btn::before {
							position: absolute;
							left: 0;
							top: 30rpx;
							bottom: 30rpx;
							display: block;
							width: 2rpx;
							height: auto;
							content: " ";
							font-size: 0;
							border-left: 2rpx dashed #f2171a;
							opacity: 0.1;
						}

						.item-box.robbed .item-btn::before {
							border-left: 2rpx dashed #333;
						}

						.item-box .icon {
							width: 100rpx;
							height: 100rpx;
							position: absolute;
							right: 20rpx;
							top: -30rpx;
							display: none;
						}

						.item-box.received .icon,
						.item-box.robbed .icon {
							display: block;
						}

						.item-box.received .item-btn {
							background: #fff;
						}

						.item-box.received .item-btn .btn-box .btn {
							border: 2rpx solid #f2171a;
							color: #f2171a;
							background: #fff;
							line-height: 46rpx;
						}

						.item-box.robbed .item-btn {
							background: #fff;
						}

						.item-box.robbed .item-btn .btn-box .number,
						.item-box.robbed .item-btn .btn-box .condition {
							color: #999;
						}

						.item-box.robbed .item-btn .btn-box .progress-box,
						.item-box.robbed .item-btn .btn-box .progress-box .progress {
							background: #ccc;
						}

						.item-box.robbed .item-btn .btn-box .btn {
							border: 2rpx solid #ddd;
							color: #999;
							background: #fff;
							line-height: 46rpx;
						}

						/* 店铺券 end */

						/* 商品券 */

						.item-box .left {
							flex: 1;
							display: flex;
							padding: 20rpx;
						}

						.item-box .left .img {
							width: 180rpx;
							height: 180rpx;
							border-radius: 10rpx;
							overflow: hidden;
							font-size: 0;
						}

						.item-box .left .img image {
							border-radius: 10rpx;
						}

						.item-box .left .text-box {
							flex: 1;
							margin-left: 20rpx;
						}

						.item-box .left .text-box .goods-name {
							font-size: 24rpx;
							height: 72rpx;
							line-height: 36rpx;
							font-weight: 600;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
							text-overflow: ellipsis;
							position: relative;
						}

						.item-box .left .text-box .coupon-number {
							display: flex;
							align-items: baseline;
							margin-top: 6rpx;
						}


						.item-box .left .text-box .coupon-number .number {
							display: flex;
							align-items: baseline;
							color: #f2171a;
							font-family: arial;
							font-weight: 600;
						}

						.item-box .left .text-box .coupon-number .number .symbol {
							font-size: 28rpx;
						}

						.item-box .left .text-box .coupon-number .number .text {
							font-size: 44rpx;
						}

						.item-box .left .text-box .condition {
							font-size: 24rpx;
							flex: 1;
							display: flex;
							align-items: center;
						}

						.item-box .right {
							text-align: center;
							display: flex;
							align-items: center;
							justify-content: center;
							position: relative;
							padding: 20rpx;
							width: 170rpx;
						}

						.item-box .right::before {
							position: absolute;
							left: -2rpx;
							top: 30rpx;
							bottom: 30rpx;
							display: block;
							width: 2rpx;
							height: auto;
							content: " ";
							font-size: 0;
							border-right: 2rpx dashed #f2171a;
							opacity: 0.1;
						}

						.item-box .right .btn-box {
							flex: 1;
							position: relative;
							z-index: 1;
						}

						.item-box .right .btn-box .progress-text {
							font-size: 24rpx;
						}

						.item-box .right .btn-box .progress-box {
							height: 22rpx;
							background: #f0f0f0;
							border-radius: 30rpx;
							margin: 10rpx 6rpx 0;
							overflow: hidden;
						}

						.item-box .right .btn-box .progress-box .progress {
							height: 22rpx;
							border-radius: 30rpx;
							background: #f53e17;
						}

						.item-box .right .btn-box .btn {
							font-size: 24rpx;
							color: #fff;
							height: 50rpx;
							line-height: 50rpx;
							box-sizing: border-box;
							text-align: center;
							border-radius: 50rpx;
							background: -webkit-linear-gradient(left, #f53e17, #f2171a);
							background: linear-gradient(to right, #f53e17, #f2171a);
							margin-top: 20rpx;
						}

						.item-box.received .right .btn-box .btn {
							border: 2rpx solid #f2171a;
							color: #f2171a;
							background: none;
							line-height: 46rpx;
						}

						.item-box.robbed .right .btn-box .btn {
							border: 2rpx solid #ddd;
							color: #999;
							background: none;
							line-height: 46rpx;
						}

						.item-box.robbed .right .btn-box .progress-text {
							color: #999;
						}

						.item-box.robbed .right .btn-box .progress-box,
						.item-box.robbed .right .btn-box .progress-box .progress {
							background: #eee;
						}
					}
				}
			}
		}

		/* 商品券 end */


		/* 加载完成 */
		.loadall {
			margin: 20rpx 0;
			line-height: 2em;
			font-size: 28rpx;
			color: #aaa;
			text-align: center;
		}


		/* 列表为空 */
		.empty {
			margin-top: 100rpx;
			text-align: cneter;


			.empty-icon {
				display: block;
				width: 80rpx;
				height: 80rpx;
				margin: 0 auto;
				margin-bottom: 20rpx;
			}

			.empty-icon>image {
				width: 100%;
				height: 100%;
			}

			.empty-text {
				font-size: 24rpx;
				text-align: center;
				color: #999;
				line-height: 40rpx;
				margin-top: 10rpx;
			}
		}
	}
</style>
